<template>
  <view class="index">
    <!-- #ifdef H5 -->
    <view>h5</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>weixin </view>
   <!-- #endif -->
    <!-- 头部搜索框 -->
    <HeadSearch></HeadSearch>
    <!-- 轮播图 -->
    <u-swiper :list="swiperList" name="image_src" height="340"></u-swiper>
    <!-- 导航 -->
    <view class="nav u-flex">
      <navigator
        v-for="item in navList"
        :key="item.name"
        class="u-flex-1 u-p-15"
      >
        <u-image width="100%" mode="widthFix" :src="item.image_src"> </u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 标题 -->
        <view class="floor-title">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u-image>
          <!-- {{item1.floor_title.name}} -->
        </view>
        <!-- 图片列表 -->
        <view class="floor-picList">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image
              width="100%"
              height="100%"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [], //轮播图
      navList: [], //导航
      floorList: [], //楼层
    };
  },
  onLoad() {
    this.getSwiper();
    this.getNav();
    this.getFloor();
  },
  methods: {
    async getSwiper() {
    this.swiperList = await this.$u.get('/home/swiperdata')
    },
    async getNav() {
      this.navList = await this.$u.get('/home/catitems')
    },
    async getFloor() {
      this.floorList = await this.$u.get('/home/floordata')
    },
  },
};
</script>

<style lang="scss" >
.floor-group{
  margin-top: 20rpx;
}
.floor-picList {
  padding: 0 12rpx;
  overflow: hidden;
  navigator {
    float: left;
  }
  // 第一张大图
  navigator:nth-child(1) {
    width: 232rpx;
    height: 386rpx;
  }
  // 四张小图
  navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  //   第二跟第四张左右边距
  navigator:nth-child(2),
  navigator:nth-child(4) {
    margin: 0 15rpx;
  }
  // 三四张上边距
  navigator:nth-last-child(-n + 2) {
    margin-top: 10rpx;
  }
}
</style>
